<template>
  <div style="text-align: center">
    <div style="text-align: center">
      <el-form size="small" :inline="true" :model="formData" :rules="rule" ref="registerForm" class="demo-form-inline">
        <el-form-item label="贡献度选择方式" prop="Choose">
          <el-select v-model="formData.Choose" @change="textChange" placeholder="请选择">
            <el-option label="百分比" value="per"></el-option>
            <el-option label="个数" value="num"></el-option>
          </el-select>
        </el-form-item>&nbsp;

        <el-form-item label="选择标准" prop="param">
          <el-input v-if="formData.Choose === 'per'" v-model="formData.param" placeholder="请输入1-00"></el-input>
          <el-select v-else v-model="formData.param" placeholder="选择个数">
            <el-option label="1" value=1></el-option>
            <el-option label="2" value=2></el-option>
            <el-option label="3" value=3></el-option>
            <el-option label="4" value=4></el-option>
            <el-option label="5" value=5></el-option>
            <el-option label="6" value=6></el-option>
          </el-select>
        </el-form-item>&nbsp;

        <el-form-item label="迭代次数" prop="gen">
          <el-input v-model="formData.gen" :model="formData.gen"></el-input>
        </el-form-item>&nbsp;
        <el-form-item label="粒子个数" prop="pop">
          <el-input v-model="formData.pop" :model="formData.pop"></el-input>
        </el-form-item>&nbsp;&nbsp;
        <el-form-item>
          <el-button type="primary" @click="onSubmit('registerForm')">优化</el-button>
        </el-form-item>
        <el-button type="primary" round size="small" @click="this.MoRen">默认选择</el-button>
      </el-form>

      <el-dialog
        :visible.sync="dialogVisible3"
        width="80%">
        <div id="myChart4" style="width: 1100px;height: 340px;text-align: left"></div>
        <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible3 = false">关闭</el-button>
      </span>
      </el-dialog>

    </div>

    <div style="height: 560px" v-loading="loading"
         element-loading-text="后台PSO正在帮您拼命优化中..."
         element-loading-spinner="el-icon-loading"
         element-loading-background="rgba(0,0,0,0.8)">
      <el-row :gutter="40">
        <el-col :span="16">
          <div class="grid-content bg-purple">
            <div v-show="this.f1" id="myChart1" style="width: 1000px;height: 300px;text-align: left"></div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <div v-show="this.f2" id="myChart2" style="width: 400px;height: 300px;text-align: right"></div>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <div class="grid-content bg-purple">
            <div v-show="this.f3" id="myChart3" style="width: 1000px;height: 260px;text-align: left"></div>
          </div>
        </el-col>
        <el-col :span="1">
          <div class="grid-content bg-purple">&nbsp;
          </div>
        </el-col>
        <el-col :span="7">
          <div class="grid-content bg-purple">
            <div v-show="this.f4" style="font-size: medium;color: #5daf34;text-align: left">
              数据序号：<span style="font-size: large;color: black">{{this.single_data.no}}</span><br/>
              真实值：<span style="font-size: large;color: black">{{-this.single_data.cotrResult.real}}</span><br/>
              <!--推理值：<span style="color: black">{{-this.single_data.cotrResult.result}}</span><br/>-->
              优化值：<span style="font-size: large;color: black">{{-this.single_data.pso_result}}</span><br/>
              优化效果：<span style="font-size: large;color: black">{{this.single_data.optimal_result}} （{{parseFloat((this.single_data.optimal_result/(-this.single_data.cotrResult.real))*100).toFixed(2)}}%）</span><br/>
              <div>
                <el-row :gutter="5">
                  <el-col :span="6">
                    <div id="save1"></div>
                  </el-col>
                  <el-col :span="6">
                    <div id="save2" style="color: black"></div>
                  </el-col>
                  <el-col :span="6">
                    <div id="save3" style="font-size: large;color: black"></div>
                  </el-col>
                  <el-col :span="6">
                    <div id="save4" style="font-size: large;color: black"></div>
                  </el-col>
                </el-row>
              </div>
              贡献度总占比：<span style="font-size: large;color: black">{{this.single_data.cotrResult.sum}}%</span>

            </div>
          </div>
        </el-col>
      </el-row>
    </div>

  </div>
</template>
<script>
  let that;
  let dataTool = require('echarts/dist/extension/dataTool.js')
  let cat = new Array();
  for (let i = 0; i <= 100; i++) {
    cat[i] = i;
  }
  ;
  export default {
    name: "second",
    data() {
      return {
        s: null,
        info: {
          map: {
            result: [],
            pso_result: [],
          },
          list: []
        },
        single_data: {
          no: null,
          pso_result: null,
          optimal_result: null,
          pso_data: [],
          pso_data2: [],
          pso_data3: [],
          pso_attr: null,
          cotrResult: {
            real: null,
            result: null,
            real_data2: [],
            real_data3: [],
            num: [],
            indivi: [],
            sum: null
          }
        },
        default_data: {
          arr: [],
          arr70: [],
          arr80: [],
          arr90: [],
          arr100: []
        },
        formData: {
          Choose: "per",
          param: null,
          gen: 100,
          pop: 20
        },
        rule: {
          Choose: [
            {required: true, message: "不能为空", trigger: ['blur', 'change']}
          ],
          param: [
            {required: true, message: "不能为空", trigger: 'blur'},
            {pattern: /^([1-9][0-9]{0,1}|100)$/, message: "所填数在1-100", trigger: "blur"}
          ],
          gen: [
            {required: true, message: "不能为空", trigger: 'blur'},
            {pattern: /^(500|[1-4][0-9][0-9]|[1-9][0-9]|[1-9])$/, message: "所填数在1-500", trigger: "blur"}
          ],
          pop: [
            {required: true, message: "不能为空", trigger: 'blur'},
            {pattern: /^([1-4][0-9]{0,1}|50)$/, message: "所填数在1-50", trigger: "blur"}
          ]
        },
        loading: false,
        f1: false,
        f2: false,
        f3: false,
        f4: false,
        dialogVisible3: false
      }
    },
    created() {
      that = this;
    },
    methods: {
      onSubmit(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.loading = true;
            this.f1 = false;
            this.f2 = false;
            this.f3 = false;
            this.f4 = false;
            this.$axios.get("http://localhost:8084/BRB2/optimize", {
              params: {
                Choose: this.formData.Choose,
                param: this.formData.param,
                gen: this.formData.gen,
                pop: this.formData.pop
              }
            }).then(res => {
              this.info = res.data;
              this.loading = false;
            })

          } else {
            return false;
          }
        })
      },
      textChange: function () {
        this.formData.param = null;
      },
      MoRen: function () {
        this.dialogVisible3 = true;
        this.$axios.get("http://localhost:8084/BRB2/getDefault").then(res => {
          this.default_data = res.data;
        });
        console.log(this.default_data.arr);
        this.figure4();
      },
      inter: function () {
        let sa1 = document.getElementById("save1");
        let sa2 = document.getElementById("save2");
        let sa3 = document.getElementById("save3");
        let sa4 = document.getElementById("save4");
        sa1.innerText = "";
        sa2.innerText = "";
        sa3.innerText = "";
        sa4.innerText = "";
        if (this.single_data != null) {
          for (let i = 0; i < this.single_data.pso_attr.length; i++) {
            sa1.innerText += "关键参数" + (i + 1) + "：" + "\n";
            sa2.innerText += this.single_data.pso_attr[i] + "\n";
            sa3.innerText += parseFloat(this.single_data.pso_data[i]).toFixed(4) + "\n";
            sa4.innerText += this.single_data.cotrResult.indivi[i] + "%\n";
          }
        }
      },
      figure1: function () {
        let myEcharts = this.$echarts.init(document.getElementById("myChart1"));
        let option = {
          title: {
            text: "优化结果（绝对值）",
            x: 'center',
            y: 'top',
            textStyle: {
              fontSize: 15
            }
          },
          grid: {
            show: 'true',
            borderWidth: '0'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            left: 100,
            top: 30,
            padding: [0, 50, 0, 0],
            data: [{
              name: '优化前',
              textStyle: {
                color: "#65a7d1"
              }
            },
              {
                name: '优化后',
                textStyle: {
                  color: "#65f54f"
                }
              }]
          },
          xAxis: {
            type: 'category',
            data: cat
          },
          yAxis: {
            type: "value",
            scale: true
          },
          series: [{
            name: "优化前",
            type: "line",
            data: this.info.map.result,
            color: "#65a7d1"
          }, {
            name: "优化后",
            type: "line",
            data: this.info.map.pso_result,
            color: "#65f54f"
          }]
        };
        myEcharts.off('click');
        myEcharts.setOption(option);

        this.$axios.get("http://47.96.248.58:8084/BRB2/single", {
          params: {
            num: 1
          }
        }).then(res => {
          this.single_data = res.data;
        })

        this.$axios.get("http://47.96.248.58:8084/BRB2/single", {
          params: {
            num: 1
          }
        }).then(res => {
          this.single_data = res.data;
        })

        myEcharts.on('click', param => {
          this.$axios.get("http://47.96.248.58:8084/BRB2/single", {
            params: {
              num: param.dataIndex
            }
          }).then(res => {
            this.single_data = res.data;
          })
        })
      },
      figure2: function () {
        let box_data = dataTool.prepareBoxplotData(this.info.list);
        /*console.log(box_data)*/
        let myEcharts = this.$echarts.init(document.getElementById("myChart2"));
        let option = {
          title:
            {
              text: '数据范围',
              left: 'center',
              textStyle: {
                fontSize: 15
              }
            },
          tooltip: {
            trigger: 'item',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '10%',
            right: '10%',
            bottom: '15%'
          },
          xAxis: {
            type: 'category',
            data: ['优化前', '优化后'],
            boundaryGap: true,
            nameGap: 14,
            splitArea: {
              show: false
            },
            splitLine: {
              show: false
            }
          },
          yAxis: {
            type: 'value',
            splitArea: {
              show: true
            },
            scale: true
          },
          series: [
            {
              name: 'boxplot',
              type: 'boxplot',
              data: box_data.boxData,
              tooltip: {
                formatter: function (param) {
                  return [
                    '上限: ' + parseFloat(param.data[5]).toFixed(4),
                    '上四分位数: ' + parseFloat(param.data[4]).toFixed(4),
                    '中位数: ' + parseFloat(param.data[3]).toFixed(4),
                    '下四分位数: ' + parseFloat(param.data[2]).toFixed(4),
                    '下限: ' + parseFloat(param.data[1]).toFixed(4)
                  ].join('<br/>');
                }
              }
            },
            {
              name: '离群值',
              type: 'scatter',
              data: box_data.outliers
            }
          ]
        };
        myEcharts.setOption(option);
      },
      figure3: function () {
       // console.log(this);
        let myEcharts = this.$echarts.init(document.getElementById("myChart3"))
        let option = {
          title: {
            text: "可操作属性在其各自区间范围内的占比",
            x: 'center',
            y: 'top',
            textStyle: {
              fontSize: 15
            }
          },
          tooltip: {
            formatter: function (param) {
              return [
                '占比:' + parseFloat((param.data) * 100).toFixed(2) + '%',
              ].join('<br/>');
            }
          },
          legend: {
            left: 100,
            top: 30,
            padding: [0, 50, 0, 0],
            data: [{
              name: '优化前',
              textStyle: {
                color: "#81a8f5"
              }
            },
              {
                name: '优化后',
                textStyle: {
                  color: "#61f559"
                }
              }]
          },
          xAxis: {
            type: 'category',
            data: ["掘进速度", "刀盘转矩", "盾构推力", "刀盘转速", "土仓压力", "灌浆体积"]
          },
          yAxis: {
            type: "value"
          },
          series: [{
            name: "优化前",
            type: "bar",
            data: this.single_data.cotrResult.real_data3,
            color: "#81a8f5"
          }, {
            name: "优化后",
            type: "bar",
            data: this.single_data.pso_data3,
            color: "#2117d1"
          },]
        };
        myEcharts.setOption(option);
      },
      figure4: function () {
        let myEcharts = this.$echarts.init(document.getElementById("myChart4"));
        let option = {
          title: {
            text: "选择70% 80% 90% 100%贡献度",
            x: 'center',
            y: 'top',
            textStyle: {
              fontSize: 15
            }
          },
          grid: {
            show: 'true',
            borderWidth: '0'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            left: 100,
            top: 30,
            padding: [0, 50, 0, 0],
            data: [{
              name: '源数据',
              textStyle: {
                color: "#65a7d1"
              }
            },
              {
                name: '70%',
                textStyle: {
                  color: "#65f54f"
                }
              },
              {
                name: '80%',
                textStyle: {
                  color: "#f53025"
                }
              },
              {
                name: '90%',
                textStyle: {
                  color: "#f5de3e"
                }
              },
              {
                name: '100%',
                textStyle: {
                  color: "#6544d1"
                }
              }
            ]
          },
          xAxis: {
            type: 'category',
            data: cat
          },
          yAxis: {
            type: "value",
            scale: true
          },
          series: [{
            name: "源数据",
            type: "line",
            data: this.default_data.arr,
            color: "#65a7d1"
          }, {
            name: "70%",
            type: "line",
            data: this.default_data.arr70,
            color: "#65f54f"
          },
            {
              name: "80%",
              type: "line",
              data: this.default_data.arr80,
              color: "#f53025"
            },
            {
              name: "90%",
              type: "line",
              data: this.default_data.arr90,
              color: "#f5de3e"
            },
            {
              name: "100%",
              type: "line",
              data: this.default_data.arr100,
              color: "#6544d1"
            }]
        };
        myEcharts.setOption(option);
      }
    }, watch: {
      info: function () {
        this.figure1();
        this.figure2();
        this.f1 = true;
        this.f2 = true;
        this.f3 = false;
        this.f4 = false;
      },
      single_data: function () {
        this.figure3();
        this.inter();
        this.f3 = true;
        this.f4 = true;
      },
      default_data: function () {
        this.figure4();
      }
    }
  }
</script>

<style scoped>

</style>

